<template>
  <view
    class="videoContent"
    v-if="guestFilmVideoData.length && homeStore.showStatus"
  >
    <!-- <view class="title">视频展示</view> -->
    <view
      class="video"
      v-for="(item, index) in guestFilmVideoData"
      :key="index"
    >
      <video :src="item.videoUrl"></video>
      <view class="contnet">
        <view class="name">{{ item.title }}</view>
        <view class="js"> {{ item.content }}</view>
      </view>
    </view>
  </view>
  <van-empty description="暂无视频" v-else />
</template>

<script setup>
import { onMounted } from "vue";
import { guestFilmVideo } from "@/api/guestFilm";
import useHomeStore from "@/store/modules/home";

const homeStore = useHomeStore();

// 视频数据
// const videoList = ref([
//   "https://v3.cdnpk.net/videvo_files/video/free/2014-12/large_preview/Raindrops_Videvo.mp4",
//   "https://v3.cdnpk.net/videvo_files/video/free/2014-06/large_preview/Blue_Sky_and_Clouds_Timelapse_0892__Videvo.mp4",
//   "https://videocdn.cdnpk.net/euphony/content/video/partners0499/large_watermarked/he1e2fc69_3121560_preview.mp4",
//   "https://static.videezy.com/system/resources/previews/000/006/879/original/Lab38.mp4",
//   "https://v3.cdnpk.net/videvo_files/video/free/video0468/large_preview/_import_616544715ef4e9.88359002.mp4",
// ]);

const guestFilmVideoData = ref([]);

const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);

onMounted(async () => {
  const result = await guestFilmVideo(pageNo.value, pageSize.value);

  console.log("result:", result);

  guestFilmVideoData.value = result.data.data.result;
  total.value = result.data.data.total;
});
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.videoContent {
  width: 100%;

  .title {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    // font-family: "楷体";
    border-left: 2px solid #55d5ff;
    padding-left: 10rpx;
  }

  .video {
    width: 100%;
    margin-top: 20rpx;

    video {
      width: 100%;
    }

    .contnet {
      text-align: center;

      .name {
        font-size: 28rpx;
      }

      .js {
        font-size: 24rpx;
        color: #8b837b;
      }
    }
  }
}
</style>
